<template>
  <div
    ref="chart"
    style="width: 100%;height: 100%"
  ></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartPie1',
  /**
   * areaColor 水花颜色
   * ringColor： 水环颜色
   * percent: 水球百分比
   */
  props: {
    percent: {
      type: Number,
      default: 50
    },
    areaColor: {
      type: Array,
      default: () => ['RGBA(36, 162, 234, 1)', 'RGBA(36, 162, 234, .5)']
    },
    ringColor: {
      type: String,
      default: 'RGBA(82, 185, 231, 1)'
    },
    title: {
      type: String,
      default: '闲置积压占比'
    }
  },
  data () {
    return {
      chart: null,
      option: null
    }
  },
  computed: {
    // getPercent () {
    //   let total = 0
    //   this.yData.forEach((item) => {
    //     total += item
    //   })
    //   return total
    // }
  },
  mounted () {
    this.$nextTick(() => {
      this.setChartOption(this.chart)
    })
  },
  beforeDestroy () {
    // this.chart.dispose()
  },
  methods: {
    // 设置option
    setChartOption (chart, yData) {
      chart = echarts.init(this.$refs.chart)
      // const color = this.areaColor
      // const value = (this.obj.num / this.getPercent) * 100
      // const int = value.toFixed(2).split('.')[0]
      // const text = '平均睡眠时长：9h'
      this.option = {
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          show: false
        },
        title: [
          {
            text: `${this.formatterTitle(this.title)}`,
            x: '50%',
            y: '55%',
            z: 10,
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontFamily: 'Microsoft YaHei',
              fontWeight: 400,
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: this.title,
            type: 'liquidFill',
            color: this.areaColor,
            data: [
              this.percent / 100,
              {
                value: this.percent / 100,
                direction: 'left'
              }
            ],
            center: ['50%', '50%'],
            radius: '90%',
            outline: {
              show: true,
              borderDistance: 5, // 边框与球中间间距
              itemStyle: {
                borderWidth: 4,
                borderColor: this.ringColor
              }
            },
            backgroundStyle: {
              color: '#fff'
            },
            itemStyle: {
              shadowColor: '#fff'
            },
            label: {
              formatter: function (p) {
                return `{a|${p.value * 100}}{b|%}`
              },
              rich: {
                a: {
                  fontSize: 24
                },
                b: {
                  fontSize: 12
                }
              },
              position: ['50%', '32%'],
              fontSize: 28,
              fontWeight: 700,
              fontFamily: 'FZZhengHeiS-EB-GB',
              color: '#333'
            }
          }
        ]
      }
      chart.setOption(this.option)
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
    formatterTitle (params) {
      let newParamsName = ''
      const paramsNameNumber = params.length
      const provideNumber = 6
      const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
      if (paramsNameNumber > provideNumber) {
        for (let p = 0; p < rowNumber; p++) {
          let tempStr = ''
          const start = p * provideNumber
          const end = start + provideNumber
          if (p === rowNumber - 1) {
            tempStr = params.substring(start, paramsNameNumber)
          } else {
            tempStr = params.substring(start, end) + '\n'
          }
          newParamsName += tempStr
        }
      } else {
        newParamsName = params
      }
      return newParamsName
    }
  }
}
</script>

<style lang="scss" scoped>
// .echarts3-wrap {
// }
</style>
